<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no">
<link rel="stylesheet" href="//at.alicdn.com/t/font_342477_owwvl7ndgo.css?v=1.0.0">
<title>我的订单</title>
<link type="text/css" rel="stylesheet" href="/static/css/s.common.css">
<link type="text/css" rel="stylesheet" href="/static/css/s.agent.css">
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/layer_mobile/layer.js"></script>
<!--
<script type="text/javascript" src="http://oss.nawen1413.com/static/js/jquery.pjax.js?v=0.01"></script>
-->
<script type="text/javascript" src="/static/js/common.js?v=0.01"></script>

<link type="text/css" rel="stylesheet" href="/static/js/dropload/dropload.css">
<script type="text/javascript" src="/static/js/dropload/dropload.min.js"></script>

<link type="text/css" rel="stylesheet" href="/static/css/order_index.css">
</head>
<body>

<div id="pages">
    <div>
        <div>
            <div class="g-am-init g-reset">
                <div class="am-tabs am-tabs-top" style="overflow:hidden;">
                    <div role="tablist" class="am-tabs-bar" tabindex="0">
						
						<div class="am-tabs-ink-bar am-tabs-ink-bar-animated" style="display: none;  width: 146px;"></div>
						
						<!--状态导航-->
						{volist name='$orderstatus' id='v'}
                        <div role="tab" data-status="{$v.status}" class="{if condition="$v.status eq $search.status"}am-tabs-tab-active0{/if} am-tabs-tab">
                            <div class="g-tabs g-relative">
                                <div>{$v.name}</div>
								{if condition="$v.StatusNum gt 0"}
								<div class="g-absolute" style="display: block; height: 30px; width: 30px; top: 42px; left: 60px; background: rgb(246, 111, 98); border-radius: 15px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 20px; line-height: 30px; font-family: &quot;&quot;; color: white; z-index: 20;">{$v.StatusNum}</div>
								{/if}
							</div>
                        </div>
						{/volist}
						<!--状态导航 End-->
						
                    </div>
					
                    <div class="am-tabs-content am-tabs-content-animated" id="container" style="transform: translateX(0%) translateZ(0px);">
					
            <div role="tabpanel" class="am-tabs-tabpane am-tabs-tabpane-active">
						
				<!--搜索-->
				<div class="g-flex g-search-box" style="background: rgb(239, 239, 244);">

					<form class="am-search am-search-start g-col" action="#">
						<div class="am-search-input">
							<div class="am-search-synthetic-ph" style="width: 100%;">
								<span class="am-search-synthetic-ph-container">
									<i class="am-search-synthetic-ph-icon"></i>
									<span class="am-search-synthetic-ph-placeholder" style="visibility: visible;">订单号/姓名/电话/商品名称</span>
								</span>
							</div>
							<input type="search" class="am-search-value" autocomplete="off" value="" placeholder="订单号/姓名/电话/商品名称">
							<a class="am-search-clear"></a>
						</div>
						<div class="am-search-cancel" style="margin-right: -80px;">搜索</div>
					</form>
					
					<span class="iconfont icon-xq- g-fs-40 g-black-light" style="line-height: 88px; margin-left: 14px; padding-right: 30px;"></span>
				</div>
				
				
				
				<!--搜索 End-->
				
				<!---222
<div class="g-flex" style="background: rgb(239, 239, 244);">
	<form class="am-search am-search-start g-col" action="#">
		<div class="am-search-input">
			<div class="am-search-synthetic-ph" style="width: 100%;">
				<span class="am-search-synthetic-ph-container">
					<i class="am-search-synthetic-ph-icon"></i>
					<span class="am-search-synthetic-ph-placeholder" style="visibility: hidden;">订单号/姓名/电话/商品名称</span>
				</span>
			</div>
			<input type="search" class="am-search-value" value="202004" placeholder="订单号/姓名/电话/商品名称" style="outline:0;"><a class="am-search-clear"></a>
		</div>
		<div class="am-search-cancel am-search-cancel-show am-search-cancel-anim" style="margin-right: 0px;">搜索</div>
	</form>
	<span class="iconfont icon-xq- g-fs-40 g-black-light" style="line-height: 88px; margin-left: 14px; padding-right: 30px;"></span>
</div>

<script>
$(function(){
	
});
</script>
				/222-->
				
				<div class="common-pull-scroll pull-view-wrap scroll-container-0" style="padding-bottom: 0px;overflow-x:hidden;">
					
					
					{notempty name='orderinfo'}
					<div style="transform: translateY(0px);">
						<div>
							<div>
								{volist name='orderinfo' id='v'}
								<a class="g-reset g-flex g-fd-c g-bg-white g-m-b" data-id="{$v.OrderID}" href="{:url('Order/detail',['id'=>$v.OrderID])}">
									<div>
										<div class="g-flex g-jc-sb g-bb g-pd">
											<div>订单编号：{$v.OrderID}</div>
											<div class="g-blue-middle" style="color: rgb(92, 141, 255);">{$v.Status|__order_status}</div></div>
									</div>
									<div>
										{volist name='$v.Product' id='y'}
										<div>
											<div class="g-flex g-pd g-bb">
												<img src="{$y.MainImg}" alt="" class="g-img-140">
												<div class="g-flex g-fd-c g-col g-pd-lr g-jc-sb">
													<div class="g-twoline g-fs-30">{$y.ProductName}</div>
													<small class="g-black-light">
														<span></span>
													</small>
													<div class="g-flex g-jc-sb">
														<div class="g-orange-dark">￥{$y.ProductPrice}</div>
														<span class="g-black-middle">x{$y.ProductVol}</span></div>
												</div>
											</div>
										</div>
										{/volist}
									   
										<div class="g-bb g-pd g-flex g-fd-rr">
											<div class="g-orange-dark">总计：￥{$v.Amount}</div>
											<div class="g-col"></div>
										</div>
									</div>
									<div class="common-order-popover">
										<div class="g-row g-pd-tb g-pd-lr">
											<div class="g-flex g-jc-sb g-ai-c">
												<div class="__target" style="width: 10vw; position: relative;">
													<div class="__top">
														<div class="__triangle" style="display: none;"></div>
														<div class="__popover" style="display: none;"></div>
													</div>
												</div>
												<div class="g-row" style="width: 86vw;">
													{$v.Status|__order_status_btns}
												</div>
											</div>
										</div>
									</div>
								</a>
								{/volist}
							</div>
						</div>
					</div>
					
					<!--
					<div class="_dropload _scroll" style="transform: translateY(0px);">
						<div class="_status">
							<div>
								<span>已全部加载</span>
							</div>
						</div>
					</div>
					-->
					
					{else /}
					<div style="transform: translateY(0px);">
						<div class="g-tc" style="margin-top: 25%;">
							<img src="//oss.nawen1413.com/images/empty_state.png" alt="" class="g-m-b">
						</div>
					</div>
					<div class="_dropload _scroll" style="transform: translateY(0px);">
						<div class="_status">
							<span class="g-fs-26">没有内容可供显示</span>
						</div>
					</div>
					{/notempty}
				</div>
            </div>

			<div role="tabpanel" class="am-tabs-tabpane am-tabs-tabpane-inactive"></div>
			<div role="tabpanel" class="am-tabs-tabpane am-tabs-tabpane-inactive"></div>
			<div role="tabpanel" class="am-tabs-tabpane am-tabs-tabpane-inactive"></div>
			<div role="tabpanel" class="am-tabs-tabpane am-tabs-tabpane-inactive"></div>
			
                    </div>
                </div>
            </div>
			
            <div class="c-share-back" data-func="abcd">
                <div class="__content">
                    <i class="iconfont icon-goback __icon"></i>
                </div>
            </div>
			
        </div>
    </div>
</div>

<style>
.dropload-down{ height:100px;  }
.dropload-up, .dropload-down{ font-size:26px; }
.dropload-refresh, .dropload-update, .dropload-load, .dropload-noData{ height:100px; line-height:100px; }
.dropload-load .loading { height: 30px; width: 30px; border-radius: 100%; margin: 12px; border: 4px solid #666; }
</style>

<script>


var __SearchArr = [
	
];

var search = {
	status : {$search.status},
	key : "{$search.key}",
	page : {$search.page},
	navIndex : 0 
};

//设置主导航热点显示状态，并处理订单列表
function setNavActive(){
	let navWidth = $(window).width() / $("[role='tab']").length;
	$('.am-tabs-ink-bar-animated').css('width',navWidth).css('display','block');
	$("[role='tab']").each(function(index){
		if(parseInt($(this).attr('data-status')) == search.status){
			search.navIndex = index;
			$(this).addClass('am-tabs-tab-active');//蓝色文字
			let x = index * navWidth;
			$('.am-tabs-ink-bar-animated').css('transform','translateX('+x+'px)'); //热点底纹定位
		}else{
			$(this).removeClass('am-tabs-tab-active');
		}
	});
	//切换数据tab
	let x = 0 - search.navIndex * 100;
	let boxWidth = $('.am-tabs-content').css('transform','translateX('+x+'%)');
	$(".am-tabs-content").find(".am-tabs-tabpane").each(function(index){
		if(index == search.navIndex){
			$(this).removeClass('am-tabs-tabpane-inactive').addClass('am-tabs-tabpane-active');
		}else{
			$(this).removeClass('am-tabs-tabpane-active').addClass('am-tabs-tabpane-inactive');
		}
	});
	
	loadList();
}
//载入当前状态下的数据
function loadList(){
	let iii = layer.open({type:2,shade:false});
	
	var html = '';
	$.ajax({
		url : "{:url('Order/order_loadpage')}",
		type : "POST",
		dataType : "text",
		data : search,
		success : function(e){
			layer.close(iii);
			$(".am-tabs-content").find(".am-tabs-tabpane").eq(search.navIndex).append(e);
			resizeMain();
		},error : function(){
		},complete : function(){
			layer.close(iii);
			search.page++;
		}
	});
}

//根据主体显示内容设置窗口尺寸
function resizeMain(){
	let _mh = jQuery(window).height() - jQuery('.g-search-box').outerHeight() - jQuery('.am-tabs-bar').outerHeight();
	console.log(_mh);
	jQuery('.scroll-container-0').is(':visible').css('min-height',_mh).css('height',_mh);
}

$(function(){
	
	setNavActive();

	//状态切换
	$("[role='tablist']").find("[role='tab']").each(function(navIndex){
		$(this).click(function(){
			search.page = 1;
			search.status = parseInt($(this).attr('data-status'));
			setNavActive();
		});
	});
	//计算主体高度
	let _mh = $(window).height() - $('.g-search-box').outerHeight() - $('.am-tabs-bar').outerHeight();
	console.log(_mh);
	$('.scroll-container-0').css('min-height',_mh).css('height',_mh);
	
	//具体订单状态按钮
	$('.order-status-btn').click(function(event){
		//event.stopPropagation();
		let action = $(this).attr('data-action');
		order_status_btn_do($(this).parents('a').attr('data-id'),action);
		return false;
	});
	
	//加载
	//$('.am-tabs-tabpane').dropload({
	/*$('.scroll-container-0').dropload({
		scrollArea : window,
		loadDownFn : function(me){
			
			$.ajax({
				type: 'GET',
				url: 'json/more.json',
				dataType: 'json',
				success: function(data){
					alert(data);
					// 每次数据加载完，必须重置
					me.resetload();
				},
				error: function(xhr, type){
					alert('Ajax error!');
					// 即使加载出错，也得重置
					me.resetload();
				}
			})
			;
			
			setTimeout(function(){
				alert('over');
				me.resetload();
			},2000);
		}
	});*/

	$('.am-tabs-tabpane').on('touchstart',function(){ 
	　　console.log('touchstart');
	}); 
	$('.am-tabs-tabpane').on('touchend',function(){ 
	　　console.log('touchend');
	}); 
});
let page = 0;
let timers;
function order_status_btn_do(orderid,action){
	if(action =='quxiao'){
		//取消订单
		$.post("{:url('Order/cancel')}",{'orderid':orderid},function(e){
			alert(e.info);
		},'JSON');
	}else if(action =='zhifu'){
		//去支付
		location.href= "{:url('Order/pay')}?orderid="+orderid;
	}else if(action =='chedan'){
		//去撤单
		location.href= "{:url('Order/applycancel')}?orderid="+orderid;
	}else if(action =='shouhuo'){
		//收货
		$.post("{:url('Order/receipt')}",{'orderid':orderid},function(e){
			alert(e.info);
		},'JSON');
	}else if(action == 'pinzheng'){
		//查看凭证
		location.href = "{:url('Order/checkrep')}?orderid="+orderid;
	}
}



</script>

</body>
</html>